@borderColor: #eaeaea; // 边框颜色
@navFontColor: #999; // 文字颜色
@navBgColor: #000; // 背景
@aHoverColor: #fff; // 鼠标移入背景颜色
@aHoverFontColor: #ff1132; // 鼠标移入字体颜色
.main {
	.title {
		padding: 25px 0;
		line-height: 30px;
		h2 {
			float: left;
			font-size: 22px;
			color: #333;
		}
		.hot-word {
			float: left;
			margin-left: 25px;
			font-size: 16px;
			color: #999;
		}
		ul {
			float: left;

			li {
				float: left;
				a {
					display: inline-block;
					height: 100%;
					padding: 0 20px;
					color: @navFontColor;
					font-size: 14px;
				}
			}
		}
		.right {
			float: right;
			span {
				font-size: 14px;
			}
			img {
				position: relative;
				top: -2px;
				width: 20px;
				height: 20px;
			}
		}
	}

	.sport {
		article {
			.banner {
				display: inline-block;
				position: relative;
				width: 330px;
				height: 540px;
				text-align: center;

				img {
					width: 330px;
					height: 540px;
				}
				.tips-list {
					position: absolute;
					width: 90%;
					bottom: 20px;
					a {
						display: inline-block;
						margin: 5px;
						padding: 10px;
						color: #333;
						background-color: #fff;
						border-radius: 40px;
						&:hover {
							background: #fbfbfd;
						}
					}
				}
			}
			.list {
				float: right;
				width: 770px;
				height: 540px;
				background: @aHoverColor;
				.item {
					float: left;
					height: 270px;
					width: 274px;
					border: 1px solid @borderColor;
					text-align: center;
					padding: 30px 0;
					box-sizing: border-box;
					cursor: pointer;
					.top {
						border: none;
						h3 {
							font-size: 24px;
							font-weight: 400;
							margin: 0 10px;
							color: #333;
						}
						p {
							margin: 10px;
							color: #666;
							font-size: 14px;
						}
					}
				}
				.item1,
				.item2 {
					height: 271px;
					margin-bottom: -1px;
				}
				.item2,
				.item5 {
					margin-left: -1px;
				}
				.item.right {
					float: right;
					width: 223px;
					box-sizing: border-box;
				}
				.right {
					float: left;
					height: 540px;
					margin-top: 0;
					padding: 0 10px;
					border-left: 0;
					h3 {
						color: #333;
						text-align: left;
						line-height: 60px;
					}
					.right-list {
						.list-item {
							padding: 20px 0;
							border-top: 1px solid @borderColor;
						}
						img {
							float: left;
						}
						.desc {
							p {
								line-height: 1.5;

								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
							}
							span {
								display: inline-block;
								margin-top: 10px;
								font-size: 1.5em;
								color: @aHoverFontColor;
							}
						}
					}
				}
			}
		}
	}

	.brand {
		article {
			.banner {
				float: left;
				width: 220px;
				height: 355px;
				text-align: center;
				img {
					width: 219px;
					height: 219px;
				}
				.decs {
					position: relative;
					height: 136px;
					text-align: center;
					color: @aHoverColor;
					background: #181818;
					.content {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
			.list {
				float: left;
				width: 880px;
				height: 354px;
				border-top: 1px solid @borderColor;
				background: @aHoverColor;
				li {
					position: relative;
					float: left;
					width: 219px;
					height: 176px;
					text-align: center;
					border-right: 1px solid @borderColor;
					border-bottom: 1px solid @borderColor;
					img,
					h3 {
						color: @navBgColor;
						transition: all 0.5s;
					}

					&:hover img {
						transform: scale(0.5);
					}
					&:hover h3 {
						opacity: 0;
						transition: all 0.5s;
					}
					&:hover .mark {
						opacity: 1;
					}
					.mark {
						position: absolute;
						opacity: 0;
						top: 7 0%;
						left: 50%;
						color: @aHoverFontColor;
						text-align: center;
						transition: all 0.5s;
						transform: translate(-50%, -50%);
						button {
							width: 80px;
							height: 36px;
							border-radius: 20px;
							margin-top: 5px;
							cursor: pointer;
							transition: all 0.5s;
							color: @aHoverFontColor;
							border: 1px solid @aHoverFontColor;
						}
					}
				}
			}
		}
	}
	.businessmen {
		margin: 15px 0 25px 0;
		background-color: #fff;
		.hot-brand {
			border-bottom: 1px solid @borderColor;
			h3 {
				line-height: 48px;
				padding-left: 30px;
				color: #333;
				border-bottom: 1px solid @borderColor;
			}
			ul {
				float: left;
				margin-right: -2px;
				li {
					float: left;
					width: 220px;
					height: 167px;
					text-align: center;
					border-right: 1px solid @borderColor;
					box-sizing: border-box;

					a {
						img {
						}
					}
				}
			}
		}
	}
}
